<template>
  <div>
    123123
    <mytop :title="title" />
    <div class="order">
      <div @click="orderBySale" :class="['sale', 'orderBy',{active: order.by==='sale'}]">
        <span>销量</span>
        <div
          :class="['angle','top',{
          active: order.by==='sale'&&order.upDown===0
         }]"
        ></div>
        <div
          :class="['angle','bottom',{
          active: order.by==='sale'&&order.upDown===1
         }]"
        ></div>
      </div>
      <div @click="orderByPrice" :class="['price', 'orderBy',{active: order.by==='price'}]">
        <span>价格</span>
        <div
          :class="['angle','top',{
          active: order.by==='price'&&order.upDown===0
         }]"
        ></div>
        <div
          :class="['angle','bottom',{
          active: order.by==='price'&&order.upDown===1
         }]"
        ></div>
      </div>
    </div>
    <div class="warp">
       <item :contentItem="items" @intDetail="detailById"/>
    </div>
  </div>
</template>

<script>
import mytop from 'components/My-Top'
import item from './components/home-item'
import { fenleiById } from 'api'
export default {
  data () {
    return {
      title: '商品列表',
      order: {
        by: 'sale',
        upDown: 1 // 1降序 0升序
      },
      items: [],
      orderBy: 'ordersDown'
    }
  },
  created () {
    this.fenleiById()
  },
  methods: {
    detailById ({ index, id }) {
      this.$router.push({
        path: '/Detail',
        query: {
          id
        }
      })
    },
    fenleiById () {
      fenleiById({
        k: this.$route.query.keyWord,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) { this.items = res.data.data }
      })
    },
    orderBySale () {
      if (this.order.by === 'price') {
        this.order.by = 'sale'
        this.order.upDown = 1
        this.orderBy = 'ordersDown'
      }
      if (this.order.upDown === 0) {
        this.order.upDown = 1
        this.orderBy = 'ordersDown'
      } else {
        this.order.upDown = 0
        this.orderBy = 'ordersUp'
      }
      this.fenleiById()
    },
    orderByPrice () {
      if (this.order.by === 'sale') {
        this.order.by = 'price'
        this.order.upDown = 0
        this.orderBy = 'priceUp'
      }
      if (this.order.upDown === 1) {
        this.order.upDown = 0
        this.orderBy = 'priceUp'
      } else {
        this.order.upDown = 1
        this.orderBy = 'priceDown'
      }
      this.fenleiById()
    }
  },
  components: {
    mytop,
    item
  }
}
</script>

<style lang="scss" scoped>
.warp {
  margin-top: 46px;
  margin-bottom: 50px;
}
.order{
  height: 40px;
  background-color: #f1f1f1;
  position: fixed;
  width:100%;
  top:46px;
  left:0;
  font-size: 14px;
  color:#666;
  display: flex;
  font-weight: 900;
  align-items: center;
  justify-content: space-around;
  .orderBy{
    position: relative;
    &.active{
      color:#f66;
    }
    .angle{
      width:0;
      height:0;
      border: 6px solid transparent;
      position: absolute;
      right: -15px;
    }
    .angle.top{
      border-bottom-color:#666;
      top:-2px;
      &.active{
         border-bottom-color:#f66;
      }
    }
    .angle.bottom{
      border-top-color:#666;
      top:12px;
      &.active{
         border-top-color:#f66;
      }
    }
  }
}
</style>
